<template tag="以下文档内容为hycli自动生成">
  <div style="height: 100%">
    <div style="margin:0.8rem;"><h5 style="display:inline">人员跟踪</h5><span style="margin-left: 0.5rem; color:#999"> 跟踪人员工作安排情况</span>
        <ddmenu :menuList="lob_idList" @valueChanged="onlob_idChange" v-model="form_aaano.lob_id" menuType="my_business_line" ></ddmenu>
    </div>
    <hr style="margin-top:0;color:#999"/>
<div class="query">
    
    <el-form :model="form_aaano" inline >
        <!-- 日期控件个数： 0 -->
        <!--员工 下拉控件多选 -->
        <el-form-item>
            <el-select v-model="form_aaano.master" filterable clearable multiple collapse-tags  style="width: 140px"
            collapse-tags-tooltip placeholder="员工">
                <el-option v-for="item in masterList" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
        </el-form-item>
        <!--类型 下拉控件多选 -->
        <el-form-item>
            <el-select v-model="form_aaano.dev_tp" filterable clearable multiple collapse-tags  style="width: 140px"
            collapse-tags-tooltip placeholder="类型">
                <el-option v-for="item in dev_tpList" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
        </el-form-item>
        <!-- 控件个数：[] -->

        <span class="ddl">
        </span>
        <el-form-item>
            <el-space wrap>
                <el-button type="primary" icon="Search" @click="onQuery(true)">查询</el-button>
            </el-space>
        </el-form-item>
        

        <!-- xtabs -->
        

    </el-form>
</div>
<div class="list">
    <el-table :data="dataList_aaano"
    
    v-loading="conf.loading" stripe  style="width: 100%;height:calc(100vh - 160px)"
         empty-text="无数据">le
<el-table-column width="24px" type="expand">
    <template #default="view">
        <el-row :gutter="24">
            <el-col :span="5" class="text-right" style="min-height:26px">编号:</el-col>
            <el-col :span="7" v-text="view.row.le_id" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">员工:</el-col>
            <el-col :span="7" v-text="view.row.master_label" style="min-height:26px"
              ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">类型:</el-col>
            <el-col :span="7" v-text="view.row.dev_tp_label" style="min-height:26px"
              :class="$js.page.colorful(view.row.dev_tp,'dev_tp')" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">数量:</el-col>
            <el-col :span="7" v-text="view.row.le_count" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">任务1:</el-col>
            <el-col :span="7" v-text="view.row.le_name_1" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">任务1开始:</el-col>
            <el-col :span="7" v-text="view.row.le_start_task_time_1" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">任务1完成:</el-col>
            <el-col :span="7" v-text="view.row.le_finish_task_time_1" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">任务2:</el-col>
            <el-col :span="7" v-text="view.row.le_name_2" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">任务2开始:</el-col>
            <el-col :span="7" v-text="view.row.le_start_task_time_2" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">任务2完成:</el-col>
            <el-col :span="7" v-text="view.row.le_finish_task_time_2" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">任务3:</el-col>
            <el-col :span="7" v-text="view.row.le_name_3" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">任务3开始:</el-col>
            <el-col :span="7" v-text="view.row.le_start_task_time_3" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">任务3完成:</el-col>
            <el-col :span="7" v-text="view.row.le_finish_task_time_3" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">任务4:</el-col>
            <el-col :span="7" v-text="view.row.le_name_4" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">任务4开始:</el-col>
            <el-col :span="7" v-text="view.row.le_start_task_time_4" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">任务4完成:</el-col>
            <el-col :span="7" v-text="view.row.le_finish_task_time_4" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">任务5:</el-col>
            <el-col :span="7" v-text="view.row.le_name_5" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">任务5开始:</el-col>
            <el-col :span="7" v-text="view.row.le_start_task_time_5" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">任务5完成:</el-col>
            <el-col :span="7" v-text="view.row.le_finish_task_time_5" style="min-height:26px" ></el-col>
        </el-row>
    </template>
</el-table-column>
        
        	<!--id text -->
        <el-table-column  show-overflow-tooltip    align="center" label="编号" >
            <template #default="scope">
                  <span>{{ scope.row.id||'-' }}</span>
              </template>
        </el-table-column>
        	<!--master select -->
        <el-table-column    min-width="160"   prop="master" align="center" label="员工">
            <template #default="scope">
                <span 
                    v-text="scope.row.master_label"></span>
            </template>
        </el-table-column>
        	<!--dev_tp select -->
        <el-table-column     prop="dev_tp" align="center" label="类型">
            <template #default="scope">
                <span :class="$js.page.colorful(scope.row.dev_tp,'dev_tp')" 
                    v-text="scope.row.dev_tp_label"></span>
            </template>
        </el-table-column>
        	<!--count text -->
        <el-table-column  show-overflow-tooltip   min-width="60"   align="center" label="数量" >
            <template #default="scope">
                  <span>{{ scope.row.count||'-' }}</span>
              </template>
        </el-table-column>
        <el-table-column :width="30*20+20" align="center" label="任务进度">
        <template #header>
            <gantt mode="header" :maxNo="30" @selectChange="ganttChange" :data="dataList_aaano"
            :labels="['任务1','任务2','任务3','任务4','任务5']"
            :dates="['task_time_1','task_time_2','task_time_3','task_time_4','task_time_5']"></gantt>
        </template>
        <template #default="scope">
            <gantt mode="line" :maxNo="30" :ganttIdx="ganttIdx" :data="dataList_aaano" :row="scope.row.__raw"
            :labels="['任务1','任务2','任务3','任务4','任务5']"
            :dates="['task_time_1','task_time_2','task_time_3','task_time_4','task_time_5']"></gantt>
        </template>
        </el-table-column>
    </el-table>
    <el-pagination :currentPage="form_aaano.pi" :page-size="form_aaano.ps"
        style="position: absolute; right: 30px;bottom:6px;" :page-sizes="[10,15,20,30, 50, 100]" :background="false" small
        layout="total,sizes,prev, pager, next, jumper" :total="total_aaano" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
</div>
  </div>
</template>
<script>
// 人员跟踪
import gantt from "@/views/cmpnts/gantt.vue"
// 业务线
import ddmenu from "@/views/cmpnts/ddMenu.vue"



export default {
components: {
    gantt,
     ddmenu,
},
data() {
  return {
    shortcuts: this.$js.page.latestDays(),
    cmpnt_funcs:{},
    conf: {
      loading: false,
      progressColor: this.$theia.env.conf.progress || []
    },
    ganttIdx: -1,
        form_aaano: {
            pi: 1,
            ps: 15,
            disabled:false,
            single_date_range_name:"",
            single_date_range_value:[],
            single_text_name:"",
            single_text_value:"",
            master:[],
            dev_tp:[],
            lob_id:"",
            },
            masterExts:[],
            masterList:[],
            dev_tpExts:[],
            dev_tpList:[],
            lob_idList:[],
            dataList_aaano:[],
            multiQueryDateRange:[],
            multiQueryText:[],
            total_aaano:0,
            note_dataList:[],
};
  },
mounted() {
  this.loadEnums_aaano()
  this.form_aaano.lob_id = this.$theia.user.get("lob_id")
  this.form_aaano.single_date_range_name = (this.multiQueryDateRange[0]||{}).value
  this.form_aaano.single_text_name = (this.multiQueryText[0]||{}).value

  this.form_aaano = Object.assign(this.form_aaano,this.$route.params)
  this.queryData_aaano ()
    },
methods: {
  ganttChange(id) {
      this.ganttIdx = id
    },

queryData_aaano(mform = {},nform={}){
    //构建查询参数
    let queryForm = Object.assign({},this.form_aaano)
    queryForm = Object.assign(queryForm,nform||{})
    
    //处理多个日期选择
    queryForm[this.form_aaano.single_date_range_name] = this.form_aaano.single_date_range_value
    queryForm[this.form_aaano.single_text_name] = this.form_aaano.single_text_value
   
    //处理日期范围选择
      queryForm.master = (queryForm.master||[]).join(",")
      queryForm.dev_tp = (queryForm.dev_tp||[]).join(",")

    queryForm[this.form_aaano.single_date_range_name] = null
    queryForm.single_date_range_value = null
    queryForm.single_date_range_name = null

    queryForm.single_text_value = null
    queryForm.single_text_name = null
 
    //处理关联表staff_tracking staff_tracking 
   
    //发送查询请求
    let that = this
    that.conf.loading = true
    //构建统计查询
  //数据查询
  this.$theia.http.get("/ws/staff/tracking/query",queryForm).then(res=>{
      if((res.items||[]).length < (queryForm.ps||10)){
        that.form_aaano.disabled = true
      }
      that.conf.loading = false
      that.dataList_aaano = res.items||[]
      that.total_aaano = res.count
      that.resetItemData_aaano(that,that.dataList_aaano)
    });
  },

  resetItemData_aaano(that,lst){
    lst.forEach(item => {
      item.__raw = Object.assign({}, item)
    item.master_label = that.$theia.enum.getName("staff_info",item.master)
    item.dev_tp_label = that.$theia.enum.getName("dev_tp",item.dev_tp)
    item.id_progress = item.id
    item.master_progress = item.master
    item.dev_tp_progress = item.dev_tp
    item.count_progress = item.count
    item.finish_task_time_4_progress = item.finish_task_time_4
    item.start_task_time_2_progress = item.start_task_time_2
    item.finish_task_time_2_progress = item.finish_task_time_2
    item.start_task_time_5_progress = item.start_task_time_5
    item.finish_task_time_1_progress = item.finish_task_time_1
    item.start_task_time_3_progress = item.start_task_time_3
    item.start_task_time_1_progress = item.start_task_time_1
    item.name_2_progress = item.name_2
    item.name_3_progress = item.name_3
    item.name_5_progress = item.name_5
    item.finish_task_time_3_progress = item.finish_task_time_3
    item.start_task_time_4_progress = item.start_task_time_4
    item.name_1_progress = item.name_1
    item.finish_task_time_5_progress = item.finish_task_time_5
    item.name_4_progress = item.name_4
    item.le_id = item.id
    item.le_master = item.master
    item.le_dev_tp = item.dev_tp
    item.le_count = item.count
    item.le_name_1 = item.name_1
    item.le_start_task_time_1 = item.start_task_time_1
    item.le_finish_task_time_1 = item.finish_task_time_1
    item.le_name_2 = item.name_2
    item.le_start_task_time_2 = item.start_task_time_2
    item.le_finish_task_time_2 = item.finish_task_time_2
    item.le_name_3 = item.name_3
    item.le_start_task_time_3 = item.start_task_time_3
    item.le_finish_task_time_3 = item.finish_task_time_3
    item.le_name_4 = item.name_4
    item.le_start_task_time_4 = item.start_task_time_4
    item.le_finish_task_time_4 = item.finish_task_time_4
    item.le_name_5 = item.name_5
    item.le_start_task_time_5 = item.start_task_time_5
    item.le_finish_task_time_5 = item.finish_task_time_5
    if(item.children){
      that.resetItemData_aaano(that,item.children)
    }
  });
  },
    loadEnums_aaano(){
        //员工
        this.masterList = this.$theia.enum.get("staff_info","",this.$theia.user.get("lob_id"),false,"")
        //类型
        this.dev_tpList = this.$theia.enum.get("dev_tp","","" ,false,"")
        //业务线
        this.lob_idList = this.$theia.enum.getTree("my_business_line","","" ,99)
        //员工
        this.masterList = this.$theia.enum.get("staff_info","",this.$theia.user.get("lob_id"),false,"")
        //类型
        this.dev_tpList = this.$theia.enum.get("dev_tp","","" ,false,"")
    },

  handleSizeChange(ps){
    this.form_aaano.ps = ps
    this.onQuery(true)
  },
  onlob_idChange(v){
    this.$theia.user.set("lob_id",v)
    this.loadEnums_aaano()
    this.onQuery(true)
  },
  handleCurrentChange(pi){
    this.form_aaano.pi = pi
    this.onQuery()
  },
  onQuery(refresh){
    if(refresh){
      this.form_aaano.pi = 1
    }
    this.queryData_aaano ()
  },
},
};
</script>
<style>
.el-dialog{
  border-radius:5px !important
}
</style>
<style scoped>
.el-form-item {
  margin-right: 10px !important;
}

.opts .el-button--small {
  margin-left: 0px;
  padding-left: 0px;
  margin-right: 4px;
}

/deep/.el-table td.el-table__cell div {
  vertical-align: middle;
}
/deep/.el-button+.el-dropdown{
  margin-left:0px;
}
/deep/.el-button+.el-button{
  margin-left:0px;
}
.el-button{
  padding-left: 6px !important;
  padding-right: 6px !important;
}
.blist {
  margin-bottom: 8px;
  width: 100%;
}

.blist .el-radio-group {
  margin-right: 8px;
}

.ddl {
  margin-bottom: 8px;
  width: 100%;

}

.ddl .el-dropdown {
  margin-right: 8px;
}

.listbar {
  margin-bottom: 8px;
  text-align: center;
}
 .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  font-size: 0.65rem;
}
/deep/.el-button--small{
  padding: 5px 4px;
}

.prepend /deep/.el-input__wrapper{
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}
.prepend+/deep/.el-date-editor{
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  border-left:0;
}

</style>